<template>

    <div class="detail">
        <div class="title">{{ paper.name }}</div>
        <div class="qitem" v-for="item, index in paper.questionList">
            <div class="qtitle">{{ index + 1 }}{{ item.name }}</div>
            <div class="qcontent" v-if="item.type == 0">
                <el-radio-group v-model="item.answer" disabled>
                    <el-radio v-for="(items, index) in item.list" :value="index">{{ items.content }}</el-radio>

                </el-radio-group>


            </div>
            <div class="qcontent" v-if="item.type == 1">
                <el-checkbox-group v-model="item.answer" disabled>
                    <el-checkbox v-for="(items, index) in item.list" :value="index">{{ items.content }}</el-checkbox>

                </el-checkbox-group>


            </div>
            <div class="qcontent" v-if="item.type == 2">

                <el-input type="textarea" readonly v-model="item.answer"></el-input>

            </div>
        </div>
        <div class="back">
            <el-button type="primary" @click="fanhui()">返回</el-button>

        </div>

    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import service from '../request/Request';
import router from '../router';
import { useRoute } from 'vue-router';

const route = useRoute()
const paper = ref({});
const answerlist = ref([])
onMounted(() => {
    getdetail()
    // getanswerdetail()

})
const getdetail = async () => {
    console.log(route.query.id)
    const res = await service.post("/paper/detail", {
        id: route.query.id

    })
    paper.value = res.data
    console.log(res)
    getanswerdetail()
}
const getanswerdetail = async () => {
    const res = await service.post("/paper/answerdetail", {
        id: route.query.id,
        uid: route.query.uid

    })
    console.log(res)
    answerlist.value = res.data;
    answerlist.value.forEach(el => {
        paper.value.questionList.forEach(els => {
            if (el.qid == els.id) {
                els.answer = JSON.parse(el.answer)
                console.log(els.answer)
            }
        })
    })
}
const fanhui = () => {
    router.go(-1)
}

</script>
<style scoped>
.detail {
    width: 80%;
    margin: 0 auto;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    box-sizing: border-box;
}

.title {
    font-weight: bold;
    font-size: 20px;
    color: dodgerblue;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    text-align: center;
    margin-bottom: 20px;
}

.qitem {
    width: 100%;
}

.qtitle {
    font-size: 20px;
    margin-bottom: 10px;
}

.back {
    margin-top: 20px;
    text-align: center;
}
</style>